<template>
	<view class="print-the-flow-sheet-container">
		<view class="qrcode-view" v-if="transorderInfo">
			<image v-if="transorderInfo.barCodeUrl" style="width: 375rpx;height: 375rpx;" :src="transorderInfo.barCodeUrl"></image>
			<text class="order-txt">{{ transorderInfo.transOrderCode }}</text>
		</view>

		<uni-card spacing="0" padding="10" v-if="transorderTask">
			<view class="info-view">
				<text class="info-lable">生产工单号：</text>
				<text class="info-value">{{ transorderTask.workorderCode }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">产品编码：</text>
				<text class="info-value">{{ transorderTask.itemCode }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">产品名称：</text>
				<text class="info-value">{{ transorderTask.itemName }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">单位：</text>
				<text class="info-value">{{ transorderTask.unitOfMeasure }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">批次号：</text>
				<text class="info-value">{{ transorderTask.batchCode || '' }}</text>
			</view>
		</uni-card>
		<uni-card spacing="0" padding="10" v-if="transorderTask">
			<view class="info-view">
				<text class="info-lable">流转数量：</text>
				<text class="info-value">{{ transorderTask.quantityTransfered || '0' }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">流转工序：</text>
				<text class="info-value">{{ transorderTask.processName }}</text>
			</view>
			<view class="info-view">
				<text class="info-lable">流转时间：</text>
				<text class="info-value">{{ transorderTask.createTime }}</text>
			</view>
		</uni-card>
		<view class="button-group-view" v-if="transorderTask">
			<view class="submit-btn" @click="submitEvent">切換</view>
			<view class="submit-btn cancle-btn" @click="cancleEvent">取消</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			transorder: '',
			transorderTask: undefined,
			transorderInfo: undefined
		};
	},
	onLoad(options) {
		this.transorder = options.transorder || '';
		console.log(this.transorder);
		this.refreshData();
	},
	methods: {
		async refreshData() {
			if (!this.transorder) {
				uni.showToast({
					title: '参数获取失败',
					icon: 'none'
				});
				return;
			}
			try {
				const transorderRes = await this.$u.api.transorder.transorderInfo({
					transOrderCode: this.transorder
				});
				if (transorderRes?.data?.taskId || false) {
					this.transorderInfo = transorderRes.data;
					const taskRes = await this.$u.api.task.taskInfo(transorderRes.data.taskId);
					if (taskRes?.data) {
						this.transorderTask = taskRes.data;
					}
				}
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		submitEvent() {
			if (this.vuex_currentTask.taskId == this.transorderTask.taskId) {
				uni.navigateBack({
					delta: 1
				});
				return;
			}
			if (this.vuex_currentTask && this.vuex_currentTask.status == 'START') {
				uni.showModal({
					title: '确认切换',
					content: '当前已经有任务正在进行中，是否暂停当前任务？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async res => {
						if (res.confirm) {
							try {
								const res = await this.$u.api.task.taskChange({
									taskId: this.vuex_currentTask.taskId,
									status: 'PAUSE'
								});
								this.$u.vuex('vuex_currentTask', this.transorderTask);
								uni.$emit('build_product_updataTask');
								uni.navigateBack({
									delta: 1
								});
							} catch (e) {
								//TODO handle the exception
								console.log(err);
							}
						}
					}
				});
			} else {
				this.$u.vuex('vuex_currentTask', this.transorderTask);
				uni.navigateBack({
					delta: 1
				});
			}
		},
		cancleEvent() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
.print-the-flow-sheet-container {
	padding-bottom: 50rpx;

	.button-group-view {
		display: flex;
		margin: 0 50rpx;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.submit-btn {
			background-color: #1296db;
			color: #fff;
			font-size: 28rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 100rpx;
			flex: 1;
		}

		.cancle-btn {
			background-color: #cc0000;
			margin-left: 40rpx;
		}
	}

	.qrcode-view {
		margin: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.order-txt {
		font-size: 30rpx;
		color: #333333;
		line-height: 80rpx;
	}

	.info-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		line-height: 60rpx;

		.info-lable {
			font-size: 28rpx;
			color: #333333;
		}

		.info-value {
			font-size: 28rpx;
			color: #9a9a9a;
		}

		.uni-input {
			flex: 1;
			margin-left: 15rpx;
			font-size: 28rpx;
			color: #333333;
			border-bottom: 1px solid #9a9a9a;
		}
	}
}
</style>
